<template>
  <div id="my">
	 
	 <!-- 头头 -->
	 <div class="login">
		 <van-cell-group inset>
			 <van-row type="flex" justify="space-between" align="center">
			 	
			   <van-col span="18">
				   <van-row type="flex" align="center">
					   <van-col>
						  <van-icon name="friends-o" size="50" color="#5dcaad"/> 
					   </van-col>
					   <van-col span="12" class="myloginfunction">
						   <div class="mylogintext" @click="usershowPopup">
							   <span>登录</span>
							   <span>|</span>
							   <span>注册</span>
						   </div>
						   <span class="myloginReading">本周阅读时长<span>0</span>分钟</span>
					   </van-col>
				   </van-row>
			 	  
			   </van-col>
			   
			   <van-col class="myindex" span="6">
			 		<span>我的主页<van-icon name="arrow" /></span>
			   </van-col>
			   
			 </van-row>
		 </van-cell-group>
	 </div>
	 
	 <!-- 会员 -->
	 <div class="members">
		 <van-cell-group inset>
		   <van-cell is-link>
		     <template #title>
			   <van-icon class-prefix="iconfont" name="-huangguan" color="#FFB103" size="20"/> 
		   	 <span class="membersTitle">开通会员，免费在线阅读，享专属福利</span>
		     </template>
		     <template #default>
		     	 <span class="membersValue">去开通</span>
		     </template>
		   </van-cell>
		 </van-cell-group>
	 </div>
	 
	 <!-- 常用功能 --> 
    <div class="mygrid">
		<van-cell-group inset>
		  <h5>常用功能</h5>
		  <van-grid :column-num="4" :border='false'>
		    <van-grid-item v-for="item in mygridlist" :text="item.text">
				<template #icon>
					<van-icon class-prefix="iconfont" :name="item.img" size="24"/> 
				</template>
		    </van-grid-item>	
		  </van-grid>
		</van-cell-group>
	</div>
	
	<!--  -->
	<div class="mylist">
		<van-cell-group inset>
		  <van-cell :title="mylistItem" :border='false' is-link v-for="mylistItem in mylist"/>
		</van-cell-group>
	</div>
	
	
	<!-- 登录弹出层 -->
	<van-popup v-model="showPopup" closeable close-icon-position="top-left" position="bottom" :style="{ height: '100%' }">
		<van-image
		  width="100"
		  height="100"
		  src="https://img01.yzcdn.cn/vant/cat.jpeg"
		/>
	</van-popup>
  </div>
</template>

<script>
	export default{
		data(){
			return{
				mygridlist:[
					{text:'消息中心',img:'xiaoxizhongxin',msg:false},
					{text:'购物车',img:'gouwuche',msg:false},
					{text:'阅读记录',img:'fuwujilu_huaban',msg:false},
					{text:'关注的作者',img:'icon-person-renyuan',msg:false},
					{text:'我发布的',img:'xiaoxi1',msg:false},
					{text:'笔记',img:'shouxieqianming',msg:false},
					{text:'帮助中心',img:'xiaoxi',msg:false},
					{text:'成为作者',img:'icon-person-renyuan',msg:false}
					],
				mylist:['礼卷','兑换码','礼物','购买记录','阅读报告','喜欢的短篇'],
				showPopup:false,
			}
		},
		mounted() {
			document.getElementById('my').offsetHeight<document.documentElement.clientHeight?document.getElementById('my').style.height='100vh':document.getElementById('my').style.height='auto'
		},
		methods:{
			usershowPopup(){
				this.showPopup = true;
			},
		}
	}
</script>

<style lang="scss">
	#my{
		background-color: #EFF2F3;
		margin-bottom: 3.125rem;

		.van-cell-group{
			margin-bottom: 1rem;
		}
		
		// 登录注册
		.login{
			.van-cell-group{
				background-color: transparent;
			}
			.van-row{
				padding: 0.625rem 0 0;
				box-sizing: border-box;
			}
			.myindex{
				text-align: right;
				font-size: 0.625rem;
			}
			.myloginfunction{
				margin-left: 0.625rem;
				
				.mylogintext{
					color: #5dcaad;
					margin-bottom: 0.3125rem;
					
					span{
						padding-right: 0.3125rem;
						box-sizing: border-box;
					}
				}
				.myloginReading{
					font-size: 0.75rem;
					color: #969799;
				}
			}
			
		}

		// 会员
		.members{
			.van-cell-group{
				box-shadow: 0.125rem 0.125rem 0.125rem 0 rgb(0 0 0 / 10%);
			}
			.van-cell{
				background: #f4ead5;
			}
			.van-cell__title{
				flex: 4;
			}
			.van-cell__value{
				flex: 1;
			}
			.membersTitle,.membersValue{
				color: #333;
				font-size: 0.75rem;
				white-space: nowrap;
			}
			.membersTitle{
				margin-left: 0.3125rem;
			}
			.van-cell__right-icon{
				color: #333;
			}
		}
		 
		
		// 九宫格
		.mygrid{
			.van-grid-item__icon-wrapper{
				margin-bottom: 0.3125rem;
			}
			h5{
				padding: 0.625rem 1rem 0;
				box-sizing: border-box;
			}
		}
		
	}
</style>
